<!-- html -->
<template>
    <h1 class="h1">路由</h1>
    <span class="span1" @click="routeTest1">路由跳转</span>
    <span class="span1" @click="routeTransmitTest1">路由传参</span>
    <span class="span1" @click="routeGuardTest1">路由守卫</span>
    <hr>
    <RouterView />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    name: 'routeHome'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { useRouter } from 'vue-router'
//数据
let router = useRouter()
//方法
function routeTest1() {
    router.push({
        path: '/routeHome/routeTest1'
    })
}
function routeTransmitTest1() {
    router.push({
        path: '/routeHome/routeTransmitTest1'
    })
}
function routeGuardTest1() {
    router.push({
        path: '/routeHome/routeGuardTest1'
    })
}
</script>

<!-- 样式 -->
<style scoped></style>